import React, { useState } from "react"
import { Layout } from 'antd'
import { Outlet, Routes, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './redux/store.js'
import NewJobList from './pages/NewJobList.js'
import TargetGroupPage from './pages/TargetGroupPage.js'
import DeletedJobPage from './pages/DeletedJobPage.js'
import SubmitPage from './pages/SubmitPage.js'
import JobDetailPage from './pages/JobDetail.js'
import JobDetailFunction from './pages/JobDetailFunction.js'
import FunctionLevelPage from './pages/FunctionLevelPage.js'
import AnalysisPage from './pages/CatelogyAnalysisPage.js'

import { GROUP_NEW } from './contants.js'
import SideMenu from "./components/SideMenu.js"

const { Sider, Content } = Layout

function JobMoudle(props){
  const [current, setCurrent] = useState(GROUP_NEW)

  return (<Provider store={store}>
    <Layout>
      <Sider width="200">
        <SideMenu/>
      </Sider>
      <Content style={{margin: '10px'}}>
        <Routes>
          <Route index path="new" element={<NewJobList group={current}/>} />
          <Route path="firstRound" element={<AnalysisPage/>} />
          {/* <Route path="secondRound" element={<AnalysisPage/>} /> */}
          <Route path="target" element={<TargetGroupPage/>} />
          <Route path="deleted" element={<DeletedJobPage group={current}/>} />
          <Route path="submit" element={<SubmitPage/>} />
          <Route path="detail/:index" element={<JobDetailPage/>} />
          <Route path="detailFunction/targetGroup" element={<JobDetailFunction/>} />
          <Route path="detailFunction/level" element={<FunctionLevelPage/>} />
        </Routes>
        <Outlet />
      </Content>
    </Layout>
  </Provider>)
}

export default JobMoudle
